<template>
  <div class="page-wrapper">
    <div style="text-align: left; margin-bottom: 20px;">
      <back-btn @click="goBack" />
    </div>
    <c-box :title="name + ' - 数据区列表'">
      <el-button slot="func" size="small" @click="showAddDlg">添加数据区</el-button>
      <el-table ref="table" v-loading="loading" :data="dataAreas" style="width: 100%">
        <el-table-column prop="dataareaname" label="名称" />
        <el-table-column prop="areaaddr" label="数据区地址" />
        <el-table-column prop="readcode" label="读功能码" />
        <el-table-column prop="datalen" label="数据长度" />
        <el-table-column prop="writecode" label="写功能码" />
        <el-table-column prop="dataunitlen" label="单位长度" />
        <el-table-column prop="levle" label="优先级" />
        <el-table-column prop="areadataaddroffset" label="功能">
          <template slot-scope="{row}">{{ options[row.areadataaddroffset] }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="{row}">
            <el-button
              type="text"
              size="small"
              @click="$router.push('/dataarea/' + row.dataareaid + '/data?name=' + row.dataareaname)"
            >查看数据</el-button>
            <el-button type="text" size="small" @click="showEditDlg(row)">编辑</el-button>
            <!-- <el-button type="text" size="small">查看</el-button> -->
            <!-- <el-button type="text" size="small" @click="deleteChild(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="page.total"
          :current-page.sync="page.index"
          @current-change="_getDataAreas"
        />
      </div>
    </c-box>
    <c-dialog
      :visible.sync="showDlg"
      :title="(newDataArea.dataareaid ? '编辑' : '添加')+'数据区'"
      @close="showDlg = false"
    >
      <el-form :model="newDataArea" label-width="60px" label-position="top">
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="名称:" prop="dataareaname">
              <el-input v-model="newDataArea.dataareaname" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="数据区地址(16进制)" prop="areaaddr">
              <el-input v-model="newDataArea.areaaddr" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="读功能码:" prop="readcode">
              <el-input v-model="newDataArea.readcode" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="数据长度(16进制)" prop="datalen">
              <el-input v-model="newDataArea.datalen" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="写功能码:" prop="writecode">
              <el-input v-model="newDataArea.writecode" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="单位长度" prop="dataunitlen">
              <el-input v-model="newDataArea.dataunitlen" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="优先等级:" prop="levle">
              <el-input v-model="newDataArea.levle" size="mini" placeholder="请输入" />
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="功能" prop="areadataaddroffset">
              <el-select v-model="newDataArea.areadataaddroffset" size="mini">
                <el-option
                  v-for="(o, i) in options"
                  :key="i"
                  :value="i"
                  :label="o"
                  placeholder="请选择"
                ></el-option>
              </el-select>
              <!-- <el-input v-model="newDataArea.areadataaddroffset" size="mini" placeholder="请输入" /> -->
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="danger" size="small" @click="saveDataArea">确定</el-button>
        <el-button size="small" @click="showDlg = false">取消</el-button>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import BackBtn from "@/components/BackBtn";
import CBox from "@/components/CCard";
import CDialog from "@/components/CDlg";
import Spliter from "@/components/Spliter";
import { clone } from "lodash";
import { calcPageNum } from "@/utils";
export default {
  components: {
    BackBtn,
    CDialog,
    CBox,
    Spliter
  },
  data() {
    return {
      id: null,
      loading: false,
      dataAreas: null,
      showDlg: false,
      name: "",
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      newDataArea: {},
      options: ["遥测", "遥信"]
    };
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);

    this.id = this.$route.params.id;
    this.name = this.$route.query.name;
    this._getDataAreas();
  },
  methods: {
    _getDataAreas() {
      this.loading = true;
      const params = {
        devtempserialid: this.id,
        page: this.page.index,
        rows: this.page.size
      };
      return this.$axios
        .get("fes/device/zxlIdName", { params })
        .then(res => {
          if (res.code === 1) {
            this.dataAreas = res.data.rows;
            this.$set(this.page, "total", res.data.total);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    goBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.back();
    },
    showAddDlg() {
      this.showDlg = true;
      this.newDataArea.dataareaid
        ? (this.newDataArea = { devtempserialid: this.id })
        : this.$set(this.newDataArea, "devtempserialid", this.id);
    },
    showEditDlg(data) {
      this.showDlg = true;
      this.newDataArea = clone(data);
    },
    pageChange() {},
    saveDataArea() {
      const load = this.$loading();
      console.log("提交", this.newDataArea);
      return this.$axios
        .post("fes/device/dataareaEdit", this.newDataArea)
        .then(res => {
          if (res.code === 1) {
            this._getDataAreas();
            this.showDlg = false;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => load.close());
    },
    deleteDataArea(id) {
      console.log(id);
      this.$message.error("无接口");
    }
  }
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: center;
  & > div,
  & > button {
    margin: 0 20px;
  }
}
</style>
